<template>
	<view class="all-main">
		<view class="main">
			<view class="tops">
				<view class="lefts">
					<text>经营报表</text>
					<text v-if="lists.settlement_state == 1" class="settlement-state reds">(未结算)</text>
					<text v-else class="settlement-state greens">(已结算)</text>
				</view>
				<view class="rights">
					<text>{{lists.month}}</text>
					<text class="date-btn" @click="dateClick">(可切换)</text>
					<u-datetime-picker
						:show="show"
						v-model="value1"
						:minDate="dates.minDate"
						:maxDate="dates.maxDate"
						mode="year-month"
						@confirm="dateConfirm"
						@cancel="show = false"
						@close="show = false"
						:closeOnClickOverlay="true"
					></u-datetime-picker>
				</view>
			</view>
			<view v-if="lists.id" class="content">
				<view class="bonus">
					<view class="profit-total">
						<text>股东净利润：</text>
						<text class="reds values">{{lists.money}}</text>
					</view>
					<view class="trade-total">
						<view class="lefts">
							<text>交易(万)：</text>
							<text>{{lists.trade_money}}</text>
							<text></text>
						</view>
						<view class="rights">
							<text>利润比(万)：</text>
							<text>{{lists.profit_scale}}</text>
						</view>
					</view>
					<view class="profit-detail">
						<view class="profit-detail-title">
							<text>分润明细</text>
						</view>
						<view class="profit-detail-head">
							<view class="names">
								<text>姓名</text>
							</view>
							<view class="trade-rates">
								<text>交易占比</text>
							</view>
							<view class="bonus-money">
								<text>分红金额</text>
							</view>
						</view>
						<view v-for="(item, index) in lists.accounts" :key="index" class="profit-detail-item">
							<view class="names">
								<text>{{item.name}}</text>
							</view>
							<view class="trade-rates">
								<text>{{item.trade_scale}}%</text>
							</view>
							<view class="bonus-money">
								<text :class="item.money > 0 ? 'greens' : 'reds'">{{item.money}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="accounting-detail">
					<view class="title">
						<text>账务明细</text>
					</view>
					<view class="account-total">
						<view class="entry-total" @click="detail(1)">
							<view class="tags">
								<text>{{lists.entry_money}}</text>
							</view>
							<view class="values">
								<text>入账(元)</text>
							</view>
						</view>
						<view class="issue-total" @click="detail(2)">
							<view class="tags">
								<text>{{lists.issue_money}}</text>
							</view>
							<view class="values">
								<text>出账(元)</text>
							</view>
						</view>
					</view>
					<view class="lists">
						<view v-if="lists.entry" class="account-entry">
							<view class="items">
								<text class="tags">分润：</text>
								<text class="values">{{lists.entry.profit}}</text>
							</view>
							<view class="items">
								<text class="tags">激活：</text>
								<text class="values">{{lists.entry.active1}}</text>
							</view>
							<view class="items">
								<text class="tags">激活加码2：</text>
								<text class="values">{{lists.entry.active2}}</text>
							</view>
							<view class="items">
								<text class="tags">激活加码3：</text>
								<text class="values">{{lists.entry.active3}}</text>
							</view>
							<view class="items">
								<text class="tags">服务费：</text>
								<text class="values">{{lists.entry.servers}}</text>
							</view>
							<view class="items">
								<text class="tags">{{lists.entry.bonus_txt}}：</text>
								<text class="values">{{lists.entry.bonus}}</text>
							</view>
						</view>
						<view v-if="lists.issue" class="issue-accounts">
							<view class="items">
								<text class="tags">分润：</text>
								<text class="values">{{lists.issue.profit}}</text>
							</view>
							<view class="items">
								<text class="tags">达标1：</text>
								<text class="values">{{lists.issue.active1}}</text>
							</view>
							<view class="items">
								<text class="tags">达标2：</text>
								<text class="values">{{lists.issue.active2}}</text>
							</view>
							<view class="items">
								<text class="tags">达标3：</text>
								<text class="values">{{lists.issue.active3}}</text>
							</view>
							<view class="items">
								<text class="tags">服务费：</text>
								<text class="values">{{lists.issue.servers}}</text>
							</view>
							<view class="items">
								<text class="tags">{{lists.issue.bonus_txt}}：</text>
								<text class="values">{{lists.issue.bonus}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-else mode="list" icon="/static/Empty/data_null.png" text="暂无数据">
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				month: '',
				lists: [],
				dates: {},
				value1: '',
				show: false,
			}
		},
		onLoad() {
			var date = new Date();
			let endDate = date.getDate();
			let _endDate = new Date(date.setDate(endDate));
			date.setDate(1);
			var months = _endDate.getMonth()
			if (months < 10) {
				this.month = _endDate.getFullYear() + "-0" + months
			} else {
				this.month = _endDate.getFullYear() + "-" + months
			}
			this.getHzyMinMaxDate()
			this.loadData()
		},
		onShow() {
			
		},
		methods: {
			// 获取最小和最大日期
			async getHzyMinMaxDate() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getHzyMinMaxDate'
				});
				if (res.code == 200) {
					this.dates = res.data
				}
			},
			// 获取数据
			async loadData() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getBonusAccounts',
					data: {
						month: this.month
					}
				});
				uni.hideLoading()
				if (res.code == 200) {
					this.lists = res.data
				}
			},
			// 日期切换
			dateClick() {
				this.show = true
			},
			// 日期选择
			dateConfirm(e) {
				const timeFormat = uni.$u.timeFormat
				this.month = timeFormat(e.value, 'yyyy-mm')
				this.show = false
				this.loadData()
			},
			// 财务明细
			detail(type) {
				uni.navigateTo({
					url: '/pages/hzy/shareholder/finance/detail?type=' + type + '&id=' + this.lists.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.all-main {
		.main {
			.tops {
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				
				.lefts {
					.settlement-state {
						padding-left: 10rpx;
					}
				}
				
				.rights {
					.date-btn {
						padding-left: 10rpx;
					}
				}
			}
			
			.bonus {
				margin: 0 30rpx;
				background-color: #ffffff;
				box-shadow: 7px 0px 30px -18px #888888;
				border-radius: 10rpx;
				padding: 20rpx;
				
				.profit-total {
					text-align: center;
					padding-bottom: 30rpx;
					
					.values {
						font-size: 38rpx;
						font-weight: bold;
					}
				}
				
				.trade-total {
					display: flex;
					justify-content: space-between;
					padding-bottom: 20rpx;
					border-bottom: 1px solid #f4f4f5;
				}
				
				.profit-detail {
					.profit-detail-title {
						text-align: center;
						font-size: 34rpx;
						font-weight: bold;
						padding: 30rpx 0;
						border-bottom: 1px solid #f4f4f5;
					}
					
					.profit-detail-head {
						padding: 20rpx 0;
						display: flex;
						border-bottom: 1px dashed #f4f4f5;
					}
					
					.profit-detail-item {
						padding: 20rpx 0;
						display: flex;
						font-size: 26rpx;
						border-bottom: 1px dashed #f4f4f5;
					}
					
					.names {
						width: 25%;
					}
					
					.trade-rates {
						text-align: center;
						width: 50%;
					}
					
					.bonus-money {
						width: 25%;
						text-align: right;
						
						.reds {
							color: #fa3534;
						}
						
						.greens {
							color: #18b566;
						}
					}
				}
			}
			
			.accounting-detail {
				margin: 30rpx;
				background-color: #ffffff;
				box-shadow: 7px 0px 30px -18px #888888;
				border-radius: 10rpx;
				padding: 30rpx;
				
				.title {
					text-align: center;
					padding-bottom: 30rpx;
					font-size: 34rpx;
					font-weight: bold;
					border-bottom: 1px solid #f4f4f5;
				}
				
				.account-total {
					padding: 20rpx 0;
					display: flex;
					justify-content: space-between;
					color: #ffffff;
					
					.entry-total {
						margin-left: 2.5%;
						padding: 20rpx;
						text-align: center;
						width: 40%;
						border-radius: 18rpx;
						background: linear-gradient(to right, #fab6b6, #dd6161);
					}
					
					.issue-total {
						margin-right: 2.5%;
						padding: 20rpx;
						text-align: center;
						width: 40%;
						border-radius: 18rpx;
						background: linear-gradient(to right, #71d5a1, #18b566);
					}
					
					.values {
						padding-top: 20rpx;
						font-size: 28rpx;
					}
				}
				
				.lists {
					border: 1px dashed #c8c9cc;
					border-radius: 10rpx;
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					
					.account-entry {
						width: 50%;
						border-right: 1px dashed #c8c9cc;
					}
					
					.issue-accounts {
						width: 50%;
					}
					
					.items {
						padding: 20rpx;
						border-bottom: 1px dashed #c8c9cc;
					}
				}
			}
			
			.reds {
				color: #fa3534;
			}
			
			.greens {
				color: #19be6b;
			}
		}
	}
</style>
